<template>
  <div>
    <base-page ref="basePage" :basepage="basePage">
      <div slot="insertAndEdit">
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
        <div>选择展示图片：</div>
        <el-upload
          :action="path + 'fileUtils/upload'"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadTitleSuccess"
          slot="insertAndEdit"
          :file-list="resources"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>-->
              <span class="el-upload-list__item-delete" @click="handleTitleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <div>选择详情展示图片</div>
        <el-upload
          action="http://localhost:8080/api/fileUtils/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadDetailSuccess"
          slot="insertAndEdit"
          :file-list="detailResources"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span class="el-upload-list__item-delete" @click="handleDetailRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <div style="margin-top: 20px;">
          <el-button type="info" @click="addDetail">增加</el-button>
          <el-button type="info" @click="delDetail">删除</el-button>
          <div style="margin: 20px;" v-for="(detail,index) in details" :key="index">
            <el-col :span="12">
              <el-input v-model="detail.title" placeholder="名称"></el-input>
            </el-col>
            <el-col :span="12">
              <el-input v-model="detail.content" type="textarea" placeholder="内容"></el-input>
            </el-col>
          </div>
        </div>
      </div>
    </base-page>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
import GLOBAL from "../../Global.vue";
export default {
  components: {
    "base-page": BasePage,
  },
  data() {
    return {
      path: GLOBAL.BASE_URL,
      basePage: {
        // URL
        url: "bookOperation",
        // 查询条件
        searchConf: [
          [
            {
              title: "书籍名称",
              type: "input",
              prop: "bookName",
            },
            {
              title: "作者",
              type: "input",
              prop: "author",
            },
            {
              title: "出版社",
              type: "select",
              prop: "pressId",
              data: [],
            },
            {
              title: "类型",
              type: "select",
              prop: "typeIds",
              multiple: true,
              data: [],
            },
          ],
        ],
        buttonConf: {
          insertShow: true,
          deleteShow: true,
        },
        // table列
        tableColumnConf: {
          columns: [
            { prop: "bookName", label: "书籍名称" },
            { prop: "author", label: "作者" },
            { prop: "price", label: "价格" },
            { prop: "pressName", label: "出版社" },
            { prop: "bookTypes", label: "类型" },
            { prop: "createName", label: "创建人" },
            { prop: "createTime", label: "创建时间" },
            { prop: "available", label: "是否有效" },
          ],
          operation: {
            state: true,
            defs: [],
          },
        },
        detailConf: {
          title: "",
          data: [],
        },
        // 新增修改form表单设置
        formConf: {
          formData: {
            bookName: "",
            author: "",
            price: "",
            pressId: "",
            typeIds: [],
          },
          width: "90%",
          title: "书籍新增",
          data: [
            {
              title: "书籍名称",
              type: "input",
              prop: "bookName",
            },
            {
              title: "作者",
              type: "input",
              prop: "author",
            },
            {
              title: "价格",
              type: "input",
              prop: "price",
            },
            {
              title: "出版社",
              type: "select",
              prop: "pressId",
              data: [],
            },
            {
              title: "类型",
              type: "select",
              prop: "typeIds",
              multiple: true,
              data: [],
            },
          ],
          rules: {},
        },
      },
      details: [{ title: "keyword", content: "" }],
      resources: [],
      detailResources: [],
      presses: [],
      dialogImageUrl: "",
      dialogVisible: false,
      alterFlag: false,
    };
  },
  methods: {
    addDetail() {
      this.details.push({});
    },
    delDetail() {
      if (this.details.length > 1) {
        this.details.splice(this.details.length - 1, 1);
      }
    },
    handleDetailRemove(file) {
      var index;
      for (var n = 0; n < this.detailResources.length; n++) {
        var e = this.detailResources[n];
        if (e.path === file.path) {
          index = n;
          break;
        }
      }
      this.detailResources.splice(n, 1);
      if (this.alterFlag) {
        this.resourcesRemove({ path: file.path });
      }
    },
    handleTitleRemove(file) {
      var index;
      this.resources.forEach((e, n) => {
        if (e.path === file.path) {
          index = n;
        }
      });
      this.resources.splice(index, 1);
      if (this.alterFlag) {
        this.resourcesRemove({ path: file.path });
      }
    },
    // 从数据库删除
    resourcesRemove(val) {
      this.COMMON.httpPost(
        this,
        "resourcesOperation/delete",
        val,
        (result) => {},
        (result) => {}
      );
    },
    uploadDetailSuccess(response, file, fileList) {
      if (response.result === "SUCCESS") {
        var item = {};
        var data = response.data;
        item.resourcesType = data.type;
        item.path = data.path;
        item.url = this.path + "image/" + data.path;
        this.detailResources.push(item);
      }
    },
    uploadTitleSuccess(response, file, fileList) {
      if (response.result === "SUCCESS") {
        var item = {};
        var data = response.data;
        item.resourcesType = data.type;
        item.path = data.path;
        item.url = this.path + "image/" + data.path;
        this.resources.push(item);
      }
    },
    getPress() {
      this.COMMON.httpPost(
        this,
        "pressOperation/selectList",
        { available: "1", del: "0" },
        (result) => {
          if (result.result === "SUCCESS") {
            var list = new Array();
            result.list.forEach((element) => {
              var item = {};
              item.value = element.id;
              item.label = element.pressName;
              list.push(item);
            });
            this.basePage.searchConf[0][2].data = list;
            this.basePage.formConf.data[3].data = list;
          }
        },
        (result) => {}
      );
    },
    getTypes() {
      this.COMMON.httpPost(
        this,
        "bookTypeOperation/selectList",
        { available: "1", del: "0" },
        (result) => {
          if (result.result === "SUCCESS") {
            var list = new Array();
            result.list.forEach((element) => {
              var item = {};
              item.value = element.id;
              item.label = element.typeName;
              list.push(item);
            });
            this.basePage.searchConf[0][3].data = list;
            this.basePage.formConf.data[4].data = list;
          }
        },
        (result) => {}
      );
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    getOne(val, event) {
      this.COMMON.httpPost(
        this,
        "bookOperation/selectOne",
        val,
        (result) => {
          if (result.result === "SUCCESS") {
            if (event === "detail") {
              this.$refs.basePage.setDetail(result.data);
            }
            if (event === "edit-before") {
              this.$refs.basePage.setFormData(result.data);
              this.details = result.data.details;
            }
            result.data.resources.forEach((e) => {
              e.url = this.path + "image/" + e.path;
            });
            this.resources = result.data.resources;
            result.data.detailResources.forEach((e) => {
              e.url = this.path + "image/" + e.path;
            });
            this.detailResources = result.data.detailResources;
          }
        },
        (result) => {}
      );
    },
    event(event, val) {
      switch (event) {
        case "insert": {
          val.resources = this.resources;
          val.details = this.details;
          val.detailResources = this.detailResources;
          break;
        }
        case "insert-before": {
          this.resources = [];
          this.detailResources = [];
          this.alterFlag = false;
          break;
        }
        case "edit-before": {
          this.getOne(val, event);
          this.alterFlag = true;
          break;
        }
        case "edit": {
          val.resources = this.resources;
          val.details = this.details;
          val.detailResources = this.detailResources;
          break;
        }
        case "detail": {
          this.getOne(val, event);
          break;
        }
      }
    },
    selectChange(type, pro, value) {},
    formatter(data, prop, index) {
      switch (prop) {
        case "bookTypes": {
          var str = "";
          data.forEach((e) => {
            str += e.typeName;
          });
          return str;
        }
        default: {
          return data;
        }
      }
    },
  },
  activated: function () {
    this.getPress();
    this.getTypes();
  },
};
</script>
<style>
</style>